<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>49-TangentParabola2linesAt2points.cdy</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #CSConsole {
            background-color: #FAFAFA;
            border-top: 1px solid #333333;
            bottom: 0px;
            height: 200px;
            overflow-y: scroll;
            position: fixed;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="../build/js/Cindy.js"></script>
<script id="csdraw" type="text/x-cindyscript">
draw((-9.06,0),(18.14,0),arrow->true,size->2,color->(128/255,128/255,128/255));//x-axis
draw((0,-4.66),(0,9.34),arrow->true,size->2,color->(128/255,128/255,128/255));//y-axis;
</script>
</head>
<body>
  <p><a href="http://www.amazon.com/dp/141818358X">Constructive geometry of plane curves</a>, pg.75, Problem 49</p>
  <div id="CSCanvas"></div>
        <div>
          <button id="save">Write to console</button>
        </div>

    <script type="text/javascript">
var gslp = [ 
		{ name: "A", type: "Free", pos: [ -2.0, -4.0, -0.5 ], color: [ 1.0, 0.0, 0.0 ], labeled: true }, 
		{ name: "B", type: "Free", pos: [ 12.0, 4.0, 1.0 ], color: [ 1.0, 0.0, 0.0 ], labeled: true }, 
		{ name: "C", type: "Free", pos: [0.0, 0.0, 4.0], color: [ 0.0, 1.0, 0.0 ], labeled: true }, 
		{ name: "a", type: "Join", color: [ 0.0, 1.0, 0.0 ], args: [ "A", "C" ], labeled: true }, 
		{ name: "b", type: "Join", color: [ 0.0, 1.0, 0.0 ], args: [ "B", "C" ], labeled: true }, 
		{ name: "D", type: "Mid", color: [ 0.0, 1.0, 0.0 ], args: [ "A", "C" ], visible: false, labeled: true }, 
		{ name: "E", type: "Mid", color: [ 0.0, 1.0, 0.0 ], args: [ "B", "C" ], visible: false, labeled: true }, 
		{ name: "F", type: "Mid", color: [ 0.0, 1.0, 0.0 ], args: [ "A", "D" ], visible: false, labeled: true }, 
		{ name: "G", type: "Mid", color: [ 0.0, 1.0, 0.0 ], args: [ "C", "E" ], visible: false, labeled: true }, 
		{ name: "H", type: "Mid", color: [ 0.0, 1.0, 0.0 ], args: [ "E", "B" ], visible: false, labeled: true }, 
		{ name: "K", type: "Mid", color: [ 0.0, 1.0, 0.0 ], args: [ "D", "C" ], visible: false, labeled: true }, 
		{ name: "c", type: "Join", color: [ 0.098039225, 0.61960787, 0.30588236 ], args: [ "D", "E" ], visible: false, labeled: true }, 
		{ name: "d", type: "Join", color: [ 0.098039225, 0.61960787, 0.30588236 ], args: [ "F", "G" ], visible: false, labeled: true }, 
		{ name: "e", type: "Join", color: [ 0.098039225, 0.61960787, 0.30588236 ], args: [ "H", "K" ], visible: false, labeled: true }, 
		{ name: "C0", type: "ConicBy5lines", color: [0.0, 0.0, 1.0], args: ["a", "b", "c", "d", "e"], printname: "$C_{0}$" },
];
var cdy = CindyJS({ 
    scripts: "cs*", grid: 1, snap: true,
	defaultAppearance: { fontFamily: "sans-serif", lineSize: 1, pointSize: 5.0, textsize: 12.0 }, 
	angleUnit: "°", 
	geometry: gslp, 
	ports: [ 
		{ id: "CSCanvas", width: 680, height: 350, transform: [ { visibleRect: [ -9.06, 9.34, 18.14, -4.66 ] } ], background: "rgb(168,176,192)" } ], 
	cinderella: { build: 1834, version: [ 2, 9, 1834 ] } });
            var cases = [
                ["Case 1", [4,8,1], [4,6,1], [0,0,1]],
                ["Case 2", [11,1,1], [14,1,1], [15,5,1]],
                ["Case 3", [5,4,1], [15,4,1], [10,3,1]],
            ];
            var save = document.getElementById("save");
            function dehom(vec) {
                if (Math.abs(vec[2]) < 0.001) return vec;
                return [vec[0]/vec[2], vec[1]/vec[2], 1];
            }
            save.onclick = function() {
                var s = cdy.saveState();
                res = ['"?"'];
                for (var i = 0; i < 3; ++i)
                    res.push("[" + dehom(s.geometry[i].pos).join(",") + "]");
                console.log("[" + res.join(", ") + "],");
            };
            cases.forEach(function(c) {
                var btn = document.createElement("button");
                btn.innerHTML = c[0];
                save.parentNode.insertBefore(btn, save);
                btn.onclick = function() {
                    var cmd = "";
                    for (var i = 0; i < 3; ++i)
                        cmd += gslp[i].name + ".homog = [" +
                            c[i + 1].join(", ") + "];";
                    cdy.evokeCS(cmd);
                };
            });
    </script>
</body>
</html>
